//待完善
//第8行搜索条件，自定义标签，显示为红色
<template>
    <div id="demoday1">
      <input type="text" placeholder="id" v-model="id"/>
      <input type="text" placeholder="name" v-model="pname"/>
      <input type="button" value="添加数据" @click="add" />
      <br/><br/>
      搜索条件:<input placeholder="请输入搜索内容" v-focus v-color="color" v-model="sname"/>
      <table class="tb">
        <tr class="thead">
          <th>编号</th>
          <th>名称</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
        <tr v-show="list.length == 0">
          <td colspan="4">当前列表没有任何数据</td>
        </tr>
        <tr class="tbody" v-for="item in searchname" @key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name}}</td>
          <td>{{ item.ctime | datefmt }}</td>
          <td><a href="javascript:void(0)" @click="vdelete(item.id)">删除</a></td>
        </tr>
      </table>
    </div>
</template>

<script>
  import Vue from 'vue'
  Vue.directive('focus',{
    inserted:function (el,binding) {
      var inputObj = el;
      inputObj.focus();
    }
  });
  Vue.directive('color',{
    bind:function (el,binding) {
      console.log('1-bind');
      el.style.color = binding.value;
    },
    inserted:function () {
      console.log('2-inserted');
    },
    update:function () {
      console.log('3-update');
    },
    componentUpdated:function () {
      console.log('4-componentUpdate');
    },
    unbind:function () {
      console.log('5-unbind');
    }
  });
    export default {
        name: "demo-day1",
      data(){
          return{
            id:'',
            pname:'',
            sname:'',//搜索的内容
            color:'red',
            list:{},
          }
      },
      // Vue对象实例创建成功以后就会自动调用这个方法
      created(){
        this.getlist();
      },
      mounted() {

      },
      computed:{
          //vue2.0中没有系统过滤器，需要自定义
        searchname:function(){
          var sname = this.sname;
          if (sname) {
            return this.list.filter((lists) => {
              return Object.keys(lists).some(function (key) {
                //String() 函数把对象的值转换为字符串
                //indexOf() 函数对大小写敏感，如果要检索的字符串值没有出现，则该方法返回 -1
                //toLowerCase()函数把字符串转换成小写
                return String(lists[key]).toLowerCase().indexOf(sname) > -1;
              })
            });
          } else {
            return this.list;
          }
        }
      },
      methods:{
          add:function () {
            var p = {
              id:this.id,
              name:this.pname,
              time:new Date()
            };
            if(this.id == '' || this.pname == ''){
              alert("数据为空，请填写数据");
            }else{
              this.list.push(p);
              this.id='';
              this.pname='';
            }
          },
          vdelete:function (id) {
            if(!confirm("确定要删除吗？")){
              return;
            }
            var index = this.list.findIndex(function (item) {
              return item.id = id;
            });
            this.list.splice(index,1);
          },
        getlist:function () {
            var url = 'api/message';
          this.axios.get(url)
            .then((response) =>{
              this.list =  response.data;
              console.log(this.list);
            }).catch(function (error) {
            console.log(error)
          })
        }
      }
    }
</script>

<style scoped>
  #demoday1{
    margin: 20px auto;
  }
  .tb{
    width: 300px;
    border:1px solid black;
    border-collapse: collapse;
    margin: 20px auto;/*水平居中，上右下左，左右对称，相当于margin:20px auto 20px auto;*/
  }
  tr{
    border:1px solid black;
  }
  .thead th{
    border:1px solid black;
    background-color: #0094ff;
    padding:5px;
    color:white;
    font-size: 16px;
    text-align: center;
  }
  .tbody{
    border:1px solid black;
    padding: 5px;
    text-align: center;
  }
  .tbody td{
    border:1px solid black;
  }
</style>
